<template>
  <div class="user-item">
    <div class="item-left-container">
      <div class="status">
        <loading scale="0.5" v-if="chat.status == 'loading'"></loading>
        <i class="iconfont icon-shuaxin" title="点击重发" v-else-if="chat.status == 'fail'" @click="resend"></i>
      </div>
      <div class="item-left">
        <!-- 文字信息 -->
        <div class="message-container" v-if="chat.type == 0">
          <pre class="message" v-html="content"></pre>
        </div>
        <!-- 图片信息 -->
        <div class="image" v-else-if="chat.type == 1 || chat.type == 3" @click.right.prevent="rightClickPic($event, chat)" :style="imgStyle">
          <img :src="chat.content" alt="" @dragstart.prevent @click.stop="(e)=>{$bus.$emit('viewPicture', e.target)}">
        </div>
        <!-- 文件信息 -->
        <download-card v-else-if="chat.type == 2" :file="chat.content" :fileInfo="fileInfo"></download-card>
      </div>
    </div>
    <div class="avatar"><img :src="$store.state.userInfo.avatar" alt=""></div>
  </div>
</template>

<script>
import { transToTag } from '@/utils/utils'
import DownloadCard from '@/components/DownloadCard.vue'
import Loading from '@/components/Loading.vue'

export default {
  name: "user-item",
  components: { DownloadCard, Loading },
  props: {
    chat: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {}
  },
  mounted () {
    this.createTimer()
  },
  beforeDestroy () {
    clearTimeout(this.timer)
  },
  methods: {
    // 点击重发的回调
    resend () {
      let chatItem = {
        content: this.chat.file,
        receiverId: this.chat.receiverId,
        uuid: this.chat.uuid,
        type: this.chat.type,
        sessionId: this.chat.sessionId,
        fileInfo: this.chat.fileInfo,
      }
      window.$socket.emit('chat', chatItem)
      let chat = this.chat;
      chat.status = 'loading'
      this.createTimer()
    },

    // 右键点击图片的回调
    rightClickPic (e, chat) {
      // console.log(e);
      if (chat.status === 'fail' || chat.status === 'loading') {
        this.$message.info(`图片当前处于${chat.status}阶段, 无法操作`)
        return
      }
      this.$bus.$emit('rightMenu', {
        position: { x: e.x, y: e.y },
        menuList: [{
          content: '收藏至自定义表情',
          callback: () => { this.$bus.$emit('addEmoticon', chat.content) },
        }]
      })
    },

    // 设置超时的定时器
    createTimer () {
      if (this.chat.status == 'loading') {
        this.timer = setTimeout(() => {
          if (this.chat.status == 'loading') {
            let chat = this.chat
            chat.status = 'fail'
          }
          this.timer = undefined
        }, 10000)
      }
    },

  },
  computed: {
    // 根据标识生成对应标签
    content () {
      return transToTag(this.chat.content)
    },
    // 根据图片大小生成展位盒子样式
    imgStyle () {
      // 如果是blob开头, 说明是刚发送的图片
      if (/^blob:/.test(this.chat.content)) return ''

      let reg = /\??size=([0-9]{1,3}x[0-9]{1,3})&?/;
      let arr = this.chat.content.match(reg)[1].split('x')
      return `width:${arr[0]}px;height:${arr[1]}px;`
    },

    // 文件
    fileInfo () {
      if (/^blob:/.test(this.chat.content)) return this.chat.fileInfo

      return JSON.parse(this.chat.others)
    },

  },

}
</script>

<style scoped>
.user-item {
  display: flex;
  justify-content: flex-end;
  margin: 15px 0;
}

.avatar {
  margin-left: 10px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-container {
  position: relative;
  background-color: #9eea6a;
  border-radius: 4px;
}

.message {
  padding: 8px 13px;
  font-size: 14px;
  width: fit-content;
  font-family: "Harmony Font";
  word-break: break-word;
  white-space: pre-wrap;
  text-align: left;
  margin: 0;
}

.message-container::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 7px;
  height: 4px;
  width: 4px;
  transform: rotateZ(45deg);
  background-color: inherit;
}

.message-container:hover {
  background-color: #98e165;
}

.image {
  max-height: 200px;
  max-width: 200px;
  min-height: 50px;
  min-width: 50px;
}

.image img {
  max-height: 200px;
  max-width: 200px;
  min-height: 50px;
  min-width: 50px;
  border-radius: 5px;
  border: 1px solid #eee;
  object-fit: cover;
  width: 100%;
  cursor: pointer;
}

.item-left > div,
.avatar {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
}

.item-left-container {
  display: flex;
  align-items: center;
}

.icon-shuaxin {
  color: #e93b3b;
  font-size: 14px;
  margin: 0 10px;
}

.status {
  height: 37px;
  display: flex;
  align-items: center;
}
</style>